<template>
  <div class="main1">
    <div class="searchBox">
      <Search :companyData="companyData" :initData="initSearchData" @emitSearchData="getSearchData"></Search>
    </div>
    <div class="app-amin1">
      <div class="flexblock">
        <ChartBlock1 :initSearchData="initSearchData" :initData="systemData"></ChartBlock1>
        <ChartBlock2 :initSearchData="initSearchData" :initData="HIOData"></ChartBlock2>
      </div>
      <div class="flexblock">
        <ChartBlock3 :initSearchData="initSearchData" :initData="servoData"></ChartBlock3>
        <ChartBlock4 :initSearchData="initSearchData" :initData="motorData"></ChartBlock4>
      </div>
      <div class="flexblock">
        <ChartBlock5 :initSearchData="initSearchData" :initData="allData"></ChartBlock5>
        <ChartBlock6 :initSearchData="initSearchData" :initData="allData"></ChartBlock6>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from "echarts";
import Search from "./components/search";
import ChartBlock1 from "./components/ChartBlock1.vue";
import ChartBlock2 from "./components/ChartBlock2.vue";
import ChartBlock3 from "./components/ChartBlock3.vue";
import ChartBlock4 from "./components/ChartBlock4.vue";
import ChartBlock5 from "./components/ChartBlock5.vue";
import ChartBlock6 from "./components/ChartBlock6.vue";
import api from "@/server/ncCheckConfig";

function getRangeTime(value) {
  switch (value) {
    case 0:
      return [
        moment()
          .quarter(moment().quarter())
          .startOf("quarter"),
        moment()
          .quarter(moment().quarter())
          .endOf("quarter")
      ];
    case 1:
      return [
        moment()
          .quarter(moment().quarter() - 1)
          .startOf("quarter"),
        moment()
          .quarter(moment().quarter() - 1)
          .endOf("quarter")
      ];
    case 2:
      return [
        moment()
          .year(moment().year())
          .startOf("year"),
        moment()
          .year(moment().year())
          .endOf("year")
      ];
    case 3:
      return [
        moment()
          .year(moment().year() - 1)
          .startOf("year"),
        moment()
          .year(moment().year() - 1)
          .endOf("year")
      ];
    case 4:
      return [moment(), moment()];
    default:
      break;
  }
}

export default {
  name: "MyData",
  components: {
    Search,
    ChartBlock1,
    ChartBlock2,
    ChartBlock3,
    ChartBlock4,
    ChartBlock5,
    ChartBlock6
  },
  data() {
    return {
      dateRange: [],
      companyData: [],
      pickerOptions: {
        disabledDate: time => {
          const userSelectedStartDate = new Date(this.dateRange[0]);
          const oneYearAgo = new Date(userSelectedStartDate);
          oneYearAgo.setFullYear(userSelectedStartDate.getFullYear() - 1);
          const oneYearLater = new Date(userSelectedStartDate);
          oneYearLater.setFullYear(userSelectedStartDate.getFullYear() + 1);
          return (
            time.getTime() < oneYearAgo.getTime() ||
            time.getTime() > oneYearLater.getTime()
          );
        }
      },
      initSearchData: {
        company: '',
        beginTime: `${moment(new Date())
          .subtract(12, "months")
          .format("YYYY-MM-DD")}`,
        endTime: `${moment(new Date()).format("YYYY-MM-DD")}`,
        rangeTime: [
          moment(new Date()).subtract(12, "months"),
          moment(new Date())
        ]
      },
      systemData: [], // 数控系统数据
      servoData: [], // 伺服驱动数据
      HIOData: [], // HIO数据
      motorData: [], // 电机数据
      allData: {}
    };
  },
  beforeMount() {
    api.findCompany().then(res => {
        if(res.data) {
          this.companyData = res.data
          // this.company = res.data[0]
          this.initSearchData.company = res.data[0]
          
        }
      })
      .then(res => {
        this.getData()
      })
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getSearchData(value) {
      this.initSearchData = value;
      this.getData()
    },
    setDefaultDateRange() {
      const end = new Date(); // 当前日期
      const start = new Date();
      start.setMonth(start.getMonth() - 12); // 当前日期往前推12个月
      this.dateRange = [start, end];
    },
    async getData() {
      let data = {
        ...this.initSearchData
      };
      api.findStatisticsData(data).then(res => {
        if(res.data.system) {
          this.systemData = this.dataHandler(res.data.system)
          localStorage.setItem('systemTableData', JSON.stringify(this.dataHandler(res.data.system)))
        }
        if(res.data.servo) {
          this.servoData = this.dataHandler(res.data.servo)
          localStorage.setItem('servoTableData', JSON.stringify(this.dataHandler(res.data.servo)))
        }
        if(res.data.HIO) {
          this.HIOData = this.dataHandler(res.data.HIO)
          localStorage.setItem('HIOTableData', JSON.stringify(this.dataHandler(res.data.HIO)))
        }
        if(res.data.motor) {
          this.motorData = this.dataHandler(res.data.motor)
          localStorage.setItem('motorTableData', JSON.stringify(this.dataHandler(res.data.motor)))
        }
        this.allData = res.data
      });
    },
    dataHandler(data) {
      let dataList = []
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          if(key.indexOf('total') == -1) {
            dataList.push({name: key, value: data[key]})
          }
        }
      }
      return dataList
    }
  }
};
</script>
<style  scoped>
.main1 {
  width: 100%;
  background: #e4e4e4;
  height: 100%;
}

.flexblock {
  display: flex;
  /* margin-left: 10px; */
  flex-direction: column;
  /* flex: 1; */
  width: 32%;
}
/* .flexblock:nth-child(3) {
  margin-right: 10px;
} */
.app-amin1 {
  width: 100%;
  background: #e4e4e4;
  display: flex;
  justify-content: space-around;
}
</style>